'use client'
import { useEffect, useRef } from "react";
import World from "./World";

export default function Home() {
  const ref_canvas = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    const canvas = ref_canvas.current
    if (!canvas) return;

    const world = new World(canvas);
    world.start();

    const lines = 6
    const rand_offset_angle = Math.PI / 16;
    const angle_gap = Math.PI * 2 / lines;
    let count = 0;


    const tid = setInterval(() => {
      const i = count % lines;
      const { width, height } = canvas;
      const angle = i * angle_gap + (Math.random() * 2 - 1) * rand_offset_angle;
      const digi = world.spawn_digi(
        width / 2 + world.radius * Math.cos(angle),
        height / 2 + world.radius * Math.sin(angle)
      )
      digi.hue = Math.floor((++count) / 4) % 360
    }, 32 / world.playrate)

    return () => {
      world.destory()
      clearInterval(tid)
    };
  }, [])
  return (
    <canvas ref={ref_canvas} style={{ width: '100vw', height: '100vh', userSelect: 'none' }} draggable={false} />
  );
}
